<template>
    <div id="Revire">
      <Header></Header>
      <Nav></Nav>
      <span class="headertitle">立项评审</span>
        <el-card class="box-card">
          <el-form label-width="80px">
            <el-row>
            <el-col :span="4">
                <el-form-item class="ktW" label="课题编号">
                      <el-input v-model="form.Munb1" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item class="ktW" label="批次名称">
                    <el-input v-model="form.Munb2" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item class="ktW" label="课题名称">
                    <el-input v-model="form.Munb3" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item   class="ktW" label="所属系统">
                  <el-select v-model="form.region" placeholder="请选择">
                    <el-option label="选项一" value="shanghai"></el-option>
                    <el-option label="选项二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="5">
            <el-form-item class="ktW" label="课题类别">
              <el-select v-model="form.region2" placeholder="请选择">
                <el-option label="选项一" value="0"></el-option>
                <el-option label="选项二" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        </el-form>
        <el-form>
          <el-row>
            <el-col :span="5">
                <el-form-item  label="所属系统">
                  <el-select  v-model="form.region3" placeholder="请选择">
                    <el-option label="选项一" value="shanghai"></el-option>
                    <el-option label="选项二" value="beijing"></el-option>
                  </el-select>
                  </el-form-item>
            </el-col>
          </el-row>
              <el-form-item class="btnss">
                  <el-button type="primary">筛选</el-button>
                  <el-button>清空</el-button>
              </el-form-item>
        </el-form>
        <el-button type="primary" @click="dialogVisible2 = true">审批须知</el-button>
                <el-button type="primary" @click="dialogVisible =true">课题分组</el-button>
                <el-button type="primary" @click="dialogVisible3 = true">专家分配</el-button>
                <el-button type="primary" @click="dialogVisible4 = true">批量评审结果复审</el-button>
                <el-button style="color:aqua;">直接评审</el-button>
                <!-- 11 -->
                <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                    >
             <el-table-column type="selection" width="55"></el-table-column>
             <el-table-column label="课题编号" width="120">
               <template slot-scope="scope">{{ scope.row.num1 }}</template>
             </el-table-column>
             <el-table-column prop="num2" label="批次名称" width="120"></el-table-column>
             <el-table-column prop="num3" label="课题名称" width="150"></el-table-column>
             <el-table-column prop="num4" label="状态"></el-table-column>
             <el-table-column prop="num5" label="专家分组"></el-table-column>

             <el-table-column prop="num6" label="组内评审分数"></el-table-column>
             <el-table-column prop="num7" label="最终分数"></el-table-column>
             <el-table-column prop="num8" label="课题类别"></el-table-column>
             <el-table-column prop="num9" label="负责人"></el-table-column>
             <el-table-column prop="num10" label="负责人所在单位"></el-table-column>
             <el-table-column prop="num11" label="所属系统"></el-table-column>
             <el-table-column prop="num12" label="所属城市"></el-table-column>
             <el-table-column label="操作">
                <el-link type="primary">操作</el-link>
             </el-table-column>
             </el-table>
         </el-card>
         <!-- 课题分组 -->
         <el-dialog
          title="课题分组"
          :visible.sync="dialogVisible"
          width="50%"
          >
          <el-form ref="form" :model="form">
            <el-form-item label="学段">
              <el-select v-model="form.name4" placeholder="请选择" style="width: 150px;">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
              <el-button type="primary" style="margin-left: 20px;">筛选</el-button>
              <el-button>清空</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="confirm = true">新增小组</el-button>
              <el-button type="primary" @click="add1 = true">添加至已有小组</el-button>
              <el-button style="float: right;" @click="edit =true">查看分组</el-button>
              </el-form-item>
          </el-form>
          <div class="screen">
            <el-form label-width="10%">
             <div class="search">
                <el-table
                  ref="multipleTable"
                  :data="xiaozu"
                  tooltip-effect="dark"
                  style="width: 100%"
                >
                <el-table-column type="selection" width="50"></el-table-column>
             <el-table-column prop="xz" label="课题类别" width="200" ></el-table-column>
             <el-table-column prop="xz2" label="学科类别"></el-table-column>
             <el-table-column prop="xz3" label="研究领域"></el-table-column>
             <el-table-column prop="xz4" label="所属二级机构"></el-table-column>
             <el-table-column prop="xz5" label="学段"></el-table-column>
             <el-table-column prop="xz6" label="负责人"></el-table-column>
            </el-table>
             </div>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 新增小组 -->
        <el-dialog
  title="新增小组"
  :visible.sync="confirm"
  width="30%">
  <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="小组名称">
    <el-input v-model="form.name6" style="width: 200px;" placeholder="请输入"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="confirm = false">取 消</el-button>
    <el-button type="primary" @click="confirm = false">确 定</el-button>
  </span>
        </el-dialog>
        <!-- 添加已有小组 -->
        <el-dialog
          title="添加至小组"
          :visible.sync="add1"
          width="50%">
          <el-table
                  ref="multipleTable"
                  :data="add"
                  tooltip-effect="dark"
                  style="width: 100%"
                >
                <el-table-column type="selection" width="50"></el-table-column>
             <el-table-column prop="num" label="序号" ></el-table-column>
             <el-table-column prop="num2" label="小组名称" width="500"></el-table-column>
             <el-table-column label="操作">
              <el-link type="primary" @click="dialogVisible6 = true">查 看</el-link>
              <el-link type="primary" style="margin-left: 20px;">添 加</el-link>
             </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 编辑小组 -->
        <el-dialog
          title="查看分组"
          :visible.sync="edit"
          width="50%">
          <el-form ref="form" :model="form">
            <el-form-item label="小组名称">
              <el-input v-model="form.name5" style="width: 200px;"></el-input>
              <el-button type="primary" style="margin-left: 20px;">筛选</el-button>
              <el-button>清空</el-button>
            </el-form-item>
            </el-form>
          <el-table
                  ref="multipleTable"
                  :data="add"
                  tooltip-effect="dark"
                  style="width: 100%"
                >
                <el-table-column type="selection" width="50"></el-table-column>
             <el-table-column prop="num" label="序号" ></el-table-column>
             <el-table-column prop="num2" label="小组名称" width="500"></el-table-column>
             <el-table-column label="操作">
              <el-link type="primary" @click="dialogVisible6=true">查 看</el-link>
              <el-link type="primary" style="margin-left: 20px;" @click="editing = true">编 辑</el-link>
             </el-table-column>
            </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="edit = false">取 消</el-button>
            <el-button type="primary" @click="edit = false">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 查看分组 查看 -->
        <el-dialog
          title="课题分组"
          :visible.sync="dialogVisible6"
          width="50%"
          >
          <el-form ref="form" :model="form">
            <el-form-item label="学段">
              <el-select v-model="form.name7" placeholder="请选择" style="width: 150px;">
                <el-option label="区域一" ></el-option>
                <el-option label="区域二" ></el-option>
              </el-select>
              <el-button type="primary" style="margin-left: 20px;">筛选</el-button>
              <el-button>清空</el-button>
            </el-form-item>
          </el-form>
          <div class="screen">
            <el-form label-width="10%">
             <div class="search">
                <el-table
                  ref="multipleTable"
                  :data="see"
                  tooltip-effect="dark"
                  style="width: 100%"
                >
              <el-table-column type="selection" width="50"></el-table-column>
             <el-table-column prop="num" label="课题名称" width="200" ></el-table-column>
             <el-table-column prop="num2" label="学科类别"></el-table-column>
             <el-table-column prop="num3" label="研究领域"></el-table-column>
             <el-table-column prop="num4" label="所属二级机构"></el-table-column>
             <el-table-column prop="num5" label="学段"></el-table-column>
             <el-table-column prop="num6" label="负责人"></el-table-column>
            </el-table>
             </div>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible6 = false">返 回</el-button>
          </span>
        </el-dialog>
        <!-- 查看分组 编辑 -->
        <el-dialog
          title="查看分组"
          :visible.sync="editing"
          width="50%">
          <el-form ref="form" :model="form">
            <el-form-item label="小组名称">
              <el-input v-model="form.name9" style="width: 200px;"></el-input>
              <el-button type="primary" style="margin-left: 20px;">筛选</el-button>
              <el-button>清空</el-button>
            </el-form-item>
            </el-form>
          <el-table
                  ref="multipleTable"
                  :data="add"
                  tooltip-effect="dark"
                  style="width: 100%"
                >
             <el-table-column prop="num3" label="课题名称" ></el-table-column>
             <el-table-column prop="num4" label="课题类别"></el-table-column>
             <el-table-column prop="num4" label="研究领域"></el-table-column>
             <el-table-column prop="num5" label="所属二级机构"></el-table-column>
             <el-table-column prop="num6" label="学段"></el-table-column>
             <el-table-column prop="num7" label="负责人"></el-table-column>
             <el-table-column label="操作">
              <el-link type="danger">删 除</el-link>
             </el-table-column>
            </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editing = false">取 消</el-button>
            <el-button type="primary" @click="editing = false">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 审批须知 -->
        <el-dialog
          title="上传评审材料"
          :visible.sync="dialogVisible2"
          width="30%"
          >
             <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              :file-list="fileList"
              multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传pdf文件，且不超过10M,上传的材料包括:保密协议、评审通知或评审要求</div>
            </el-upload>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">保存</el-button>
            <el-button type="primary" @click="dialogVisible2 = false">提交</el-button>
          </span>
        </el-dialog>
        <!-- 专家分配 -->
        <el-dialog
      title="分配专家"
      :visible.sync="dialogVisible3"
      width="40%">
      <el-table
        :data="fpdata"
        tooltip-effect="dark"
        style="width: 100%"
          >
             <el-table-column type="selection" width="50"></el-table-column>
             <el-table-column prop="name" label="专家编号" ></el-table-column>
             <el-table-column prop="name2"  label="账号"></el-table-column>
             <el-table-column prop="name3"  label="密码"></el-table-column>
        </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible3 = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 评审复审 -->
    <el-dialog
  title="评审结果复审"
  :visible.sync="dialogVisible4"
  width="50%">
  <el-table
          :data="fs"
          tooltip-effect="dark"
          style="width: 100%"
        >
     <el-table-column type="index" label="序号" ></el-table-column>
     <el-table-column prop="num" label="专家名称" ></el-table-column>
     <el-table-column prop="num2" label="是否通过"></el-table-column>
     <el-table-column prop="num3" label="等级"></el-table-column>
    </el-table>
  <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="评审结果">
    <el-radio-group v-model="form.name2">
      <el-radio label="通过"></el-radio>
      <el-radio label="不通过"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="课题等级">
    <el-radio-group v-model="form.name8">
      <el-radio label="A"></el-radio>
      <el-radio label="B"></el-radio>
      <el-radio label="C"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="评审意见">
    <el-input type="textarea" v-model="form.name3"></el-input>
  </el-form-item>

  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible4 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible4 = false">确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Nav from '@/components/Nav.vue'

export default {
    data(){
        return {
            dialogVisible: false,
            dialogVisible2:false,
          dialogVisible3: false,
          dialogVisible4: false,
          dialogVisible6:false,
          editing:false,
          confirm:false,
          add1:false,
          edit:false,
          see:[{
            num:'始祖鸟的消失',
            num2:'历史',
            num3:'始祖鸟',
            num4:'柳州高中',
            num5:'高二',
            num6:'张三',
          },{
            num:'始祖鸟的消失',
            num2:'历史',
            num3:'始祖鸟',
            num4:'柳州高中',
            num5:'高二',
            num6:'张三',
          },{
            num:'始祖鸟的消失',
            num2:'历史',
            num3:'始祖鸟',
            num4:'柳州高中',
            num5:'高二',
            num6:'张三',
          },{
            num:'始祖鸟的消失',
            num2:'历史',
            num3:'始祖鸟',
            num4:'柳州高中',
            num5:'高二',
            num6:'张三',
          },],
          add:[{
            num:'1',
            num2:'小组1',
            num3:'恐龙大灭绝',
            num4:'历史生物',
            num5:'柳州高中',
            num6:'高二',
            num7:'张三',
          },{
            num:'1',
            num2:'小组1',
            num3:'恐龙大灭绝',
            num4:'历史生物',
            num5:'柳州高中',
            num6:'高二',
            num7:'张三',
          },{
            num:'1',
            num2:'小组1',
            num3:'恐龙大灭绝',
            num4:'历史生物',
            num5:'柳州高中',
            num6:'高二',
            num7:'张三',
          },{
            num:'1',
            num2:'小组1',
            num3:'恐龙大灭绝',
            num4:'历史生物',
            num5:'柳州高中',
            num6:'高二',
            num7:'张三',
          },{
            num:'1',
            num2:'小组1',
            num3:'恐龙大灭绝',
            num4:'历史生物',
            num5:'柳州高中',
            num6:'高二',
            num7:'张三',
          },{
            num:'1',
            num2:'小组1',
            num3:'恐龙大灭绝',
            num4:'历史生物',
            num5:'柳州高中',
            num6:'高二',
            num7:'张三',
          },],
          xiaozu:[{
            xz:'《古猿人进化史》',
            xz2:'历史文学',
            xz3:'古猿人',
            xz4:'教育部',
            xz5:'高三',
            xz6:'张三',
          },{
            xz:'《古猿人进化史》',
            xz2:'历史文学',
            xz3:'古猿人',
            xz4:'教育部',
            xz5:'高三',
            xz6:'张三',
          },{
            xz:'《古猿人进化史》',
            xz2:'历史文学',
            xz3:'古猿人',
            xz4:'教育部',
            xz5:'高三',
            xz6:'张三',
          },{
            xz:'《古猿人进化史》',
            xz2:'历史文学',
            xz3:'古猿人',
            xz4:'教育部',
            xz5:'高三',
            xz6:'张三',
          },],
          form: {
            name:'',
            name2:'',
            name3:'',
            name4:'',
            name5:'',
            name6:'',
            name7:'',
            name8:'',
            name9:'',
          },
            tableData: [{
              num1:'20221217001',
                num2:'202209批次',
                num3:'《古猿人进化史》',
                num4:'啥状态',
                num5:'分组1',
                num6:'87',
                num7:'88',
                num8:'历史文学',
                num9:'张三',
                num10:'教育部',
                num11:'云教研后台',
                num12:'柳州市',
                num13:'7',
                num14:'小组1',
          }, {
            num1:'20221217001',
                num2:'202209批次',
                num3:'《古猿人进化史》',
                num4:'啥状态',
                num5:'分组1',
                num6:'87',
                num7:'88',
                num8:'历史文学',
                num9:'张三',
                num10:'教育部',
                num11:'云教研后台',
                num12:'柳州市',
                num13:'7',
                num14:'小组1',
          }, {
            num1:'20221217001',
                num2:'202209批次',
                num3:'《古猿人进化史》',
                num4:'啥状态',
                num5:'分组1',
                num6:'87',
                num7:'88',
                num8:'历史文学',
                num9:'张三',
                num10:'教育部',
                num11:'云教研后台',
                num12:'柳州市',
                num13:'7',
                num14:'小组1',
          }],
          fpdata:[{
            name:'001',
            name2:'专家1',
            name3:'123456',
          },{
            name:'001',
            name2:'专家1',
            name3:'123456',
          },{
            name:'001',
            name2:'专家1',
            name3:'123456',
          },{
            name:'001',
            name2:'专家1',
            name3:'123456',
          }],
          form:{
              Munb1:'',
              Munb2:'',
              Munb3:'',
              region:'', 
              region2:'', 
              region3:'', 
          },
          fs:[{
            num:'专家1',
            num2:'通过',
            num3:'A',
          },{
            num:'专家2',
            num2:'不通过',
            num3:'无',
          },{
            num:'专家3',
            num2:'不通过',
            num3:'无',
          },],
          Pname:'',
          fileList:
            [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
             {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
        }
    },
    components:{
        Header,
        Nav
    },
    methods:{
    // 多选项
    toggleSelection(rows) {
      if (rows) {
        console.log(rows, "rows");
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    toggleAll() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 清空
    empty(){
        this.Pname = ''
    }
    }
}
</script>

<style lang="less" scoped >
a{
text-decoration: none;
}
.box-card{
        width: 91%;
        height: 800px;
        float: right;
        margin-right: 1%;
        margin-top: -850px;
}

        .top{
    width: 100%;
}
// .ktW{
//   width: 200px;
//   float: left;
//   margin-left: 20px;
// }
.btnss{
  margin-right:400px;
}
body{
  position: relative;
}
.headertitle{
  position: absolute;
  top: 0;
  z-index: 999;
  margin-top: 20px;
  margin-left: 180px;
  font-size: 16px;
}
</style>